【日本語でファイルを作成しているデザイナーのあなたへ】デザイナーへのファイル命名のススメ

デザイナーの たなか ゆきこ です。 モバイルアプリサービス部で、手書きのお絵かきストーリーを作ったり、モバイルアプリのUIなどをつくったりしてます。

わたしのキャリアは、印刷広告といったマス広告業界からスタートし、WEB、そしてアプリです。命名規則については『WEB屋として、コードを書き出してから覚醒』しました。でも、今なら印刷ファイルでも命名規則がしっかりしているほうがわかりやすいと理解できます。

しかし最近のデザイナーとは、ひとことでいっても、コードを触らない人、コードも触るし絵も書く人、そもそも絵とかコードじゃなくてサービスの設計者とかいろいろいらっしゃる。

なので、この記事は『特にコードを書かないデザイナーさん』『新人デザイナーさん』に向けて、命名規則は大切なんやでって話とその理由、私ならこう命名するの例を書かせいただく記事となります。

命名規則は大切：日本語ファイルの素材とエラー（実話）

以前クライアント様がほかで作ったたという生データをいただくことがあります。その中の素材ファイルが、「日本語ファイル名@2x.png」であった場合にどうなるか？

エラーになります。日本語は2バイトフォントなので、文字化け現象を起こします。（2バイト文字とは、文字コードのうち、1文字を2バイトで表現する文字の総称。一般的に、中国語、日本語、韓国語のこと。）

この場合どうするのかといいますと、ファイル名を書き直し、そして、読み込んでいるコードのファイル名を書き直す。大したことないと思うのかもしれませんが、地味に作業時間を取られます。その地味な作業をエンジニアさんにお願いするのってかなり無駄な作業なんですよね。

最終納品物は、サーバーなどに置くことも多いですし、アプリに読み込ませる・WEBの場合は日本語だと何かしらのエラーが発生することが多いです。そのため、半角英数が安全です。

命名規則というルール：散らかる原因はルールがないこと

印刷系のデザイナーさんで多い形式はこんな感じのファイル名

「18/7/6チラシ.ai」とか「20180706フライヤー.ai」

つまり、その場その場で考えてつけている状態ですね。この記事ではそれを「ルールがない状態」とします。

さて、これは「18年7月6日配布のチラシ」なのでしょうか？それとも、「18年7月6日にデザイナーが作成したチラシ」なのでしょうか？わかりませんよね。人に渡すことを前提としているだけではないのです。1年後自分がデータを探しているときも「どっち？」ってなります。毎年どれだけのデータを作成しているねん。わかるかぁーってなりますよ（断言）。できれば、イベント日に合わせた日付が検索においては効率的です。1年以上すぎて、「●月●日のイベントのフライヤーを出して」と言われたときに日付で検索できます。

また、日付は「18/7/6」ではなく「180706」とつけるのが経験上よいです。「/」は階層表記でもありますし、なにか良からぬことが起きる原因になりやすいためです。

私がつけるなら

180706_flyer_event_devio.ai

印刷だと、同じファイル名を上書きしたりしないので、

[日付]_[もの]_[何につかうもの]_[イベント名・内容名].拡張子

でマイルールを決めています。ちなみに、チーム全員でルールを決めることができれば、ファイル名だけをみて、何をさすものなのかを認識できます。

「_（アンダースコア）」を使う理由

1. 区切ると読みやすい
2. 半角空白はよくエラーになる
3. PCの文字コードに左右されない
4. Androidでは「-（ハイフン）」はNGだから

命名規則は印刷とアプリやWEBで少しちがう：アプリやWEBの素材には、日付はいらない

理由は2つあります。一つ目の理由は、WEB、アプリは同じ素材名で上書きすることで、コード側の修正を減らすという目的がある。もう一つは、githubで管理していることが多いので、日付は必要ないためです。

命名規則とファイル名：シンプルすぎても難しい

「back@2x.png」「back2@2x.png」

上記のような名前のファイル名はよく見るのですが、作成した自分でもわからないパターンが含まれています。理由は、アイコンの戻るボタンなの？背景なの？もしくは、戻るボタンには2種類あるの？

[何につかうもの]_[画面]_[種類]_[何].拡張子

のように使えばいいかなと思ってます。「画面」は任意ですね。

アイコンだった場合

「ico_arrow_back@2x.png」のように命名します。

「ico」は icon の略ですね。母音を抜くと文字数を減らせますので略すこともあります。素直にiconって書いてもわかりやすいとは思います。 ただ、間違えて、「ico」と「icon」をごちゃまぜにすることはありますので、これって決めたらそれを使い続けよう。（自分のデータみてたらごちゃまぜのやつあった）

略称は、使うものを決めておくと大変便利です。

アイコン	ico または icon
ボタン	btn または button
背景	bg または background
その他画像	img

イメージ・背景だったような場合

共通で使うものならば「img_background_01@2x.png」。その画面のみならば「img_bg_walkthrough_01@2x.png」のように命名します。

WEB屋さんだったころ、背景の色を変更するのに01、02ってつけてました。コードまで自分で組む場合は、数字を変化させるだけで背景を変更できるため、楽だったのでそうしてましたが、今は、エンジニアさんに素材をわたすので、「red」とか色名を書く方が親切です。

最後に

日々いろいろな業務を行うにあたり、作業の効率化を考えたとき、ある程度のルール化はやはり必要かなと思います。

この記事が、参考になれば幸いです。